<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title> zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/33.b5a1b0bb.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="active sidebar-link">09-css样式书写顺序和命名规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/css样式书写顺序和命名规范.html#css代码的行为规范" class="sidebar-link">css代码的行为规范</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/css样式书写顺序和命名规范.html#css代码的命名规范" class="sidebar-link">css代码的命名规范</a></li></ul></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p><strong>样式还有书写顺序？</strong></p> <blockquote><p>样式还有书写顺序？样式这么简单的东西，不是随便写写就行的么。很多初学者，甚至有一定工作经验的人都会发出这种疑问。而样式的书写顺序到底对页面有没有影响呢？答案是肯定的。如何写出好的css样式也是一个优秀的开发者必须要知道的！而且应该养成习惯，融入到开发中！好的习惯不是一点养成的。</p></blockquote> <p>为什么要注意书写顺序？</p> <blockquote><p>减少浏览器reflow(重排），提升浏览器渲染dom树的性能</p></blockquote> <p><code>①:</code>解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构</p> <p><code>②:</code>构建render树：DOM树和CSS树合并之后形成的render树。</p> <p><code>③:</code>布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。</p> <p><code>④:</code>绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。</p> <p>css样式解析到显示至浏览器屏幕上就发生在<code>②③④</code>步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第<code>②</code>步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。</p> <p>样式的书写顺序是如何影响网页的？</p> <blockquote><p>比如如下代码：</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">span</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>当浏览器解析到<code>display</code>的时候，突然发现元素是块级元素，而之前是按照行内元素渲染的！这个时候不得不回头重新渲染，在按照块级元素解析span标签。正确的做法是<code>display</code>写在样式<code>最前面</code>，一开始就以块级元素渲染span标签。</p> <p>在看一个例子：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
   
    <span class="token property">width</span><span class="token punctuation">:</span>50%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
     <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>这个例子 解析到<code>position</code>的时候，突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，而绝对定位是根据已经定位的父元素定位的，如果父元素的大小不一样，就会出现.box大小会重新改变的结果，使页面闪动。定位又是脱离文档流的，浮起来之后可能会影响其他元素排列布局。
<code>一遍能过的非要渲染两遍 是很浪费性能的,大量的重绘页面会导致页面一闪一闪的，影响用户体验~</code></p> <p>比如这个也是一个典型例子</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
  	<span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>
  
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>这个例子已经把元素渲染了一遍,结果到最后发现不需要然后又需要去删除前面那些样式.</p> <p>1）定位属性：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>   <span class="token selector">.list</span><span class="token punctuation">{</span>
        display
        position
        float  
        left  
        top  
        right  
        bottom   
        overflow  
        clear   
        z-index
      	content
    	list-style
     	visibility
   <span class="token punctuation">}</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>（2）自身属性：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">.list</span><span class="token punctuation">{</span>
        width
        height
      	padding  
   		border
        margin   
        background
   <span class="token punctuation">}</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>（3）文字样式：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.list</span><span class="token punctuation">{</span>
        font-family   
        font-size   
        font-style   
        font-weight   
        font-varient   
        color   
   <span class="token punctuation">}</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>（4）文本属性：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">.list</span><span class="token punctuation">{</span>
        text-align   
        vertical-align   
        text-wrap   
        text-transform   
        text-indent    
        text-decoration   
        letter-spacing    
        word-spacing    
        white-space 
        text-overflow
   <span class="token punctuation">}</span>   
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>（5）css3中新增属性：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">.list</span><span class="token punctuation">{</span>  
         box-shadow
         cursor 
         border-radius  
         <span class="token property">background</span><span class="token punctuation">:</span>linear-gradient
         transform……
   <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.cl</span> <span class="token punctuation">{</span>  
    <span class="token property">display</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">visibility</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">float</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">clear</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">position</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">top</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">right</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">max-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">overflow</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">border-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-top-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-right-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-left-width</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">border-style</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-top-style</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-right-style</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-bottom-style</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-left-style</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-top-color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-right-color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-left-color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">list-style</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">table-layout</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">caption-side</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-collapse</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">border-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">empty-cells</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">font</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">text-align</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">text-transform</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">word-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">white-space</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">vertical-align</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">background-repeat</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">cursor</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  

    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
    <span class="token property">quotes</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>  
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br></div></div><h2 id="css代码的行为规范"><a href="#css代码的行为规范" class="header-anchor">#</a> css代码的行为规范</h2> <p>不要以完全没有语义的标签作为选择器,这会造成大面积污染</p> <blockquote><p>除非你可以断定现在或将来你的这个选择器不会污染其他同类</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 不推荐 */</span>
<span class="token selector">.m-xxx div</span><span class="token punctuation">{</span> ... <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="简写css颜色属性值"><a href="#简写css颜色属性值" class="header-anchor">#</a> 简写css颜色属性值</h4> <div class="language-cs line-numbers-mode"><pre class="language-cs"><code><span class="token comment">/* 不推荐 */</span>
<span class="token punctuation">.</span>box<span class="token punctuation">{</span> color<span class="token punctuation">:</span>#<span class="token number">000000</span><span class="token punctuation">;</span> background<span class="token operator">-</span>color<span class="token punctuation">:</span>#ddeeff<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/* 推荐 */</span>
<span class="token punctuation">.</span>box<span class="token punctuation">{</span> color<span class="token punctuation">:</span>#<span class="token number">000</span><span class="token punctuation">;</span> background<span class="token operator">-</span>color<span class="token punctuation">:</span>#def<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="删除css属性值为0的单位"><a href="#删除css属性值为0的单位" class="header-anchor">#</a> 删除css属性值为0的单位</h4> <blockquote><p>0就是0，任何单位都不需要,只要前面的数值为0,后面的单位都可以去掉 .</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 不推荐 */</span>
<span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/* 推荐 */</span>
<span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="删除无用css样式"><a href="#删除无用css样式" class="header-anchor">#</a> 删除无用CSS样式</h4> <blockquote><p>第一，删除无用的样式后可以减少整个网页文档的体积，提升网页的加载速度；第二，对于浏览器而言，所有的样式规则的都会被浏览器检索并且解析，即使是当前页面没有匹配的样式规则 , 浏览器也会进行检索和解析 , 所以如果去除了没有匹配的样式规则，就能够减少浏览器的索引项 ，加快浏览器的检索速度；</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 不推荐 */</span>
<span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span>12px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.nav</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.nav-item</span><span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/* 推荐 */</span>
<span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span>12px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.nav-item</span><span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="为单个css选择器或新申明开启新行"><a href="#为单个css选择器或新申明开启新行" class="header-anchor">#</a> 为单个css选择器或新申明开启新行</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 不推荐 */</span>
<span class="token selector">.home-count .hd,.content-title,.select-game-title .title</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token selector">.nav</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* 推荐 */</span>
<span class="token selector">.home-count .hd,
.content-title,
.select-game-title .title</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.nav</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="css代码的命名规范"><a href="#css代码的命名规范" class="header-anchor">#</a> css代码的命名规范</h2> <blockquote><p>1.必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；</p> <p>2.不允许单个字母的类选择器出现；</p> <p>3.不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。</p> <p>4.下划线 ’ _ ’ 禁止出现在class命名中，全小写,统一使用’-‘连字符.</p> <p>5.见名知义</p></blockquote> <h4 id="命名应简约而不失语义"><a href="#命名应简约而不失语义" class="header-anchor">#</a> 命名应简约而不失语义</h4> <blockquote><p>1.避免过度简写 , .ico足够表示这是一个图标 , 而.i不代表任何意思</p> <p>2.使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称</p></blockquote> <h3 id="html命名示范"><a href="#html命名示范" class="header-anchor">#</a> html命名示范</h3> <p>https://www.cnblogs.com/LifeiBoke/p/6791528.html</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/10-定位.html" class="prev">
        08-定位
      </a></span> <span class="next"><a href="/./guide/notes/css/13-高级选择器和伪元素.html">
        11-高级选择器和伪元素
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/33.b5a1b0bb.js" defer></script>
  </body>
</html>
